import { h, Component } from 'preact';
import { connect } from 'preact-redux';
import s from './style.scss';
import Modal from '~/components/Modal';
import Loading from '~/components/Loading';

import { appId } from '~/config.js';
import { jsSDK } from '~/servicer/index.js';
import wechat, {isWeChat} from '~/core/utils/shareWechat';

class Iframe extends Component {

	constructor(props) {
		super(props);
		this.state = {
			wechatCongfig: props.wechatCongfig,
			error: false,
			showIframe: false,
			errorMsg: '系统繁忙，请稍后重试！'
		};
	}

	componentWillMount () {
		Loading.show();
		if (!isWeChat()) {
			Loading.hide();
			this.setState({
				error: true,
				errorMsg: '请您在微信打开～'
			});
			return;
		}
		jsSDK({
			url: window.location.href.split('#')[0],
			appId
		}).then(res => {
			const { appId, timestamp, nonceStr,	signature } = res.body;
			wechat({appId, timestamp, nonceStr,	signature}).then(() => {
				window.console.log('testtest');
				this.wxSet();
			}).catch(() => {
				Loading.hide();
				this.setState({
					error: true
				});
			});
		}).catch((err) => {
			window.console.log(err, '1231');
			Loading.hide();
			this.setState({
				error: true,
				errorMsg: err.errorMsg || '系统繁忙，请稍后重试！'
			});
		});
		// if ( this.state.wechatCongfig ) {
		// 	this.wxSet();
		// } else {
		// 	Loading.hide();
		// 	this.setState({
		// 		error: true
		// 	});
		// }
	}

	componentDidMount() {
		window._hmt.push(['_trackEvent', 'live', 'DidMount', 'pageMount']);
		window._hmt.push(['_trackPageview', '/#/iframe']);
	}


	componentWillReceiveProps(nextProps) {
		if (nextProps.wechatCongfig !== this.props.wechatCongfig) {
			window._hmt.push(['_trackEvent', 'live', 'DidMount', 'successView']);
			this.setState({
				wechatCongfig: nextProps.wechatCongfig
			});
		}
	}

	handleOnload = () => {
		Loading.hide();
	}

	wxSet = () => {
		window.wx.ready(() => {
			window.wx.hideMenuItems({
				menuList: [
					'menuItem:share:qq',
					'menuItem:share:weiboApp',
					'menuItem:share:facebook',
					'menuItem:share:QZone',
					'menuItem:openWithQQBrowser',
					'menuItem:openWithSafari',
					'menuItem:share:appMessage',
					'menuItem:share:timeline',
					'menuItem:copyUrl'
				] // 要隐藏的菜单项，只能隐藏“传播类”和“保护类”按钮，所有menu项见附录3
			});
		});
		this.setState({
			showIframe: true
		});
	}

	closeModal = () => {
		this.setState({
			error: false
		});
		window.location.reload();
	}

	render() {
		const { showIframe, error, errorMsg } = this.state;
		return (
			<div className={s.root}>
				{
					showIframe ?
						<iframe
							width="100%"
							height="100%"
							scrolling="auto"
							frameBorder="0"
							src="http://www.bizconfstreaming.cn/webcast/tcbj2018.html"
							onload ={this.handleOnload}
						/> : null
				}
				<Modal isOpen={error} onRequestClose={this.closeModal}>
					<div>
						<h3 className="red al-c pdt1-5">温馨提示</h3>
						<div className="al-c pdt1 white">{errorMsg}</div>
						<div className="pdt2 al-c pdb1-5">
							<button onClick={this.closeModal} class="pd-5 w3 radius-small bg-green white">确定</button>
						</div>
					</div>
				</Modal>
			</div>
		);
	}
}

function mapStateToProps(state) {
	return state;
}

// function mapDispatchToProps(dispatch){
// 	return bindActionCreators({ setStore: setRuntimeVariable}, dispatch);
// }

export default connect(mapStateToProps)(Iframe);
